<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>消息</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <style>
        html,body{
            background-color:rgba(243,245,246,1);
        }
        body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        .nooo{
            height:54px;
            background:rgba(255,255,255,1);
            text-align:center;
            line-height: 54px;
        }
        .top{
            width: 100%;
            height:80px;
            background:rgba(255,255,255,1);
        }
        .top_box{
            width: 1180px;
            height: 100%;
            margin: 0 auto;
            align-items: center;
        }
        .top_logo{
            width:122px;
            height:32px;
            margin-right:78px;
        }
        .top_label{
            position: relative;
            height:80px;
            line-height: 80px;
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
            margin-right:48px;
        }
        .top_label_active::after{
            position: absolute;
            content: '';
            display: block;
            height: 4px;
            width: 45%;
            background-color:#FC2B40;
            bottom: 17px;
            left: 23%;
        }
        .top_down{
            display: inline-block;
            width:8px;
            height:8px;
            min-height:8px;
            width:8px;
            background: url(__IMG__/down.png) no-repeat center center;
            background-size:8px 8px;
            margin-left:4px;
        }
        .top_avatar{
            width:36px;
            height:36px;
            border-radius:50%;
            margin-right:8px;
            margin-top:22px;
        }
        .top_name{
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .top_notice{
            width:24px;
            height:24px;
            margin-left:58px;
        }
        .top_card{
            position: relative;
            height:80px;
        }
        .top_card1{
            position: absolute;
            top:75px;
            left:0;
            width:170px;
            background:#fff;
            border-radius:4px;
            z-index:99;
            font-size:16px;
            font-weight:400;
            overflow: hidden;
        }
        .top_card2{
            height:40px;
            line-height:40px;
            background:rgba(255,255,255,1);;
            color:rgba(102,102,102,1);
            padding-left:24px;
        }
        .top_card_active{
            height:40px;
            line-height:40px;
            background:rgba(252,43,64,0.1);
            color:rgba(252,43,64,1);
            padding-left:24px;
        }
        .box{
            width:1180px;
            margin:35px auto 0;
        }
        .hidden {
            display: none !important;
        }

        .card{
            width:1180px;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .one{
            width:1180px;
            height:54px;
            align-items: center;
            background:rgba(250,250,250,1);
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .tit1{
            width:120px;
            padding-left:48px;
        }
        .tit2{
            width:197px;
            padding-right:40px;
        }
        .tit3{
            width:348px;
            padding-right:40px;
        }
        .tit4{
            width:112px;
            padding-right:40px;
        }
        .tit5{
            width:73px;
            padding-right:40px;
        }
        .tit6{
            width:170px;
        }
        .one1{
            height:54px;
            align-items: center;
            background:#fff;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .blue{
            color:rgba(22,119,255,1);
        }
        .blue1{
            padding-right:24px;
        }
        .one2{
            height:54px;
            align-items: center;
            background:#FAFAFA;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .bottom{
            padding:56px 0 56px 608px;
        }

        .pageee{
            width:32px;
            height:32px;
            margin-right:8px;
        }
        .page{
            width:32px;
            height:32px;
            line-height:32px;
            text-align: center;
            background:rgba(255,255,255,1);
            border-radius:6px;
            border:1px solid rgba(221,221,221,1);
            margin-right:8px;
            font-size:14px;
            color:rgba(102,102,102,1);
        }
        .page_active{
            background:rgba(252,43,64,1);
            border-radius:6px;
            border:none;
            color:rgba(255,255,255,1);
        }
        .select_box{
            border-radius:4px;
            border:1px solid rgba(204,204,204,1);
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin:auto;
            height:30px;
            width:222px;
        }
        .select{
            width:74px;
            height:30px;
            line-height:30px;
            text-align: center;
            border-radius:4px;
        }
        .select_active{
            color:rgba(243,243,245,1);
            background:rgba(252,43,64,1);
        }
        .titleee{
            padding-bottom:35px;
        }
        .read{
            color:rgba(22,119,255,1);
        }
        .del{
            color:rgba(252,43,64,1);
            padding-left:20px;
        }
        #order,
        #about,
        #user {
            display: none;
        }
    </style>
</head>
<body>
{include file="public/header"}
<div class="box">
    <div class="titleee">
        <div class="select_box flex-wrap">
            <div class="select {if $type == 1}select_active{/if}" onclick="location.href = '/shop/message/index?type=1';">全部</div>
            <div class="select {if $type == 2}select_active{/if}" onclick="location.href = '/shop/message/index?type=2';">已读</div>
            <div class="select {if $type == 3}select_active{/if}" onclick="location.href = '/shop/message/index?type=3';">未读</div>
        </div>
    </div>
    <div class="card">
        <div class="one flex-wrap">
            <div class="tit1">序号</div>
            <div class="tit2">消息列表</div>
            <div class="tit3">消息内容</div>
            <div class="tit4">消息时间</div>
            <div class="tit5">消息状态</div>
            <div class="tit6">操作</div>
        </div>
        {if count($data)>0}
        {foreach name="data" item="vo"}
            <div class="one1 flex-wrap">
                <div class="tit1 aui-ellipsis-1">{:xuHao($key,$pages)}</div>
                <div class="tit2 aui-ellipsis-2">{$vo['n_title']?$vo['n_title']:''}</div>
                <div class="tit3 aui-ellipsis-1">{$vo['n_content']?$vo['n_content']:''}</div>
                <div class="tit4 aui-ellipsis-1">{$vo['n_time']?$vo['n_time']:''}</div>
                {if $vo['is_read']=='已读'}
                <div class="tit5 aui-ellipsis-1">已读</div>
                {else /}
                <div class="tit5 aui-ellipsis-1">未读</div>
                {/if}
                <div class="tit6 aui-ellipsis-1">
                    {if $vo['is_read']=='未读'}
                    <span class="read" data-id="{$vo.n_id}">标为已读</span>
                    {/if}
                    <span class="del" data-id="{$vo.n_id}">删除</span>
                </div>
            </div>
        {/foreach}

        {else /}
           <div class="nooo">暂无数据</div>
        {/if}
    </div>

    <div class="bottom flex-wrap">
        {$PageS}
    </div>

</div>
</body>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script>
    //单个的删除
    $(".del").click(function () {
        if(confirm('确认删除吗？')){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '/shop/message/del',
                data: 'n_id='+id,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        location.reload();
                    }
                },
                error: function () {
                    alert('数据出错，请刷新重试');
                }
            })
        }
    });
    //单个的删除
    $(".read").click(function () {
        if(confirm('确认标记已读？')){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '/shop/message/read',
                data: 'n_id='+id,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        location.reload();
                    }
                },
                error: function () {
                    alert('数据出错，请刷新重试');
                }
            })
        }
    });
</script>
</html>
